jQuery 两重循环

您所在的位置:网站首页 jquery 循环 jQuery 两重循环

jQuery 两重循环

#jQuery 两重循环| 来源: 网络整理| 查看: 265

随便学过程序的人肯定会这样的写法 for(i=0; i    //do some thing} } 这样的两重循环 经常用 在JQ 里面 循环就像是隐式的 看不到 i< i++ 之类的

但是设想 你有 N个同样的 子元素 每个子元素里面又包含M个子子元素 如何遍历他们并且执行相应操作呢? 这个问题也同样出现在解析XML 里面。今天闲着没事就自己写了一个两重的循环 解决了一个信息切换的问题

下面的代码用了 两次 each 分别对外层的dl 和 每个dl 下面的dd 遍历 需要注意的是每个each的序列分别为 i和 j 。有时候就顺手写.each(function(i){}) 这样序列就一样了 引起了混乱。所以一定要注意 。本身这个例子没有什么 只是提示了两重 或者多重循环的 计数器变量问题 有这个思路 你就可以写N重的循环了。

解释一下下面脚本的意思:

.comm 下的dl 的每一个dd 经过的时候 其dt 里面相应序列的a标签显示 其他的隐藏 由此造成了一个切换效果 这样的好处是 .comm 下面无论多少个dl 都正常转 而且各转各的 因为我给dl 进行了一重循环遍历 哎。。jQuery 的选择器和连操作真强大啊

jQuery(document).ready(function(){     jQuery(".comm dl").each(function(i){     jQuery(".comm dl").eq(i).find("dd").each(function(j){      jQuery(".comm dl").eq(i).find("dd").eq(j).mouseover(function(){      jQuery(".comm dl").eq(i).find("dt").find("a").eq(j).show().siblings().hide()                    })                 })           })   })

结构:

          名家评论                                             点内贾德浮动                     第二条新闻                     第三条新闻                     这是四条新闻                     第五条新闻了                                 去体坛群星闪耀福布斯名榜布名人                 周杰伦北京奥运主歌出布名人炉                 首批奥运候名人选保安月薪1000                 奥运冠军2布斯名人0年已翻33倍                 奥运冠军2布斯名人0年已翻33倍                                                         点内贾德浮动                     第二条新闻                     第三条新闻                     这是四条新闻                     第五条新闻了                                 去体坛群星闪耀福布斯名榜布名人                 周杰伦北京奥运主歌出布名人炉                 首批奥运候名人选保安月薪1000                 奥运冠军2布斯名人0年已翻33倍                 奥运冠军2布斯名人0年已翻33倍                                  

样式:

.comm dl{ padding:10px 10px 0; height:96px; display:block; clear:both;overflow:hidden;}} .comm dt a{ display:block;} .comm dt{ float:left; margin-right:10px; .comm dt img{ width:75px; height:75px; border:1px solid #000;} .comm dd { float:left; padding-left:10px; background:url(../img/ico/001.gif) 0 8px no-repeat; height:20px; line-height:20px; } .comm dd a{ float:left; text-align:left; width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3